<style scoped>
    .main {
        margin: 10px 100px;
    }

    .center-row {
        text-align: center;
        margin-left: -120px;
        margin-right: -120px;
    }

    .teacher-img {
        width: 180px;
        height: 180px;
    }

    .teacher-card {
        background-color: rgba(255, 255, 255, 0.1);
        margin-bottom: 8px;
    }

    .teacher-card p {
        font-size: 24px;
    }

    .teacher-card-title {
        height: 24px;
        color: #ffffff;
    }
</style>

<template>
    <div id="teacher" class="main">
        <HeadTitle></HeadTitle>
        <Row :gutter="32" className="center-row">
            <i-col span="2">
                <Button size="large" type="primary" icon="chevron-left" long @click="toHome"></Button>
            </i-col>
        </Row>
        <Row :gutter="16">
            <i-col span="8" v-for="teacher in teachers" :key="teacher.id">
                <Card class="teacher-card">
                    <p slot="title" class="teacher-card-title">
                        <Icon type="person"></Icon>
                        {{teacher.name}}
                    </p>
                    <Row>
                        <i-col span="9">
                            <img :src="teacher.img" class="teacher-img">
                        </i-col>
                        <i-col span="15">
                            <p>性别：{{renderGender(teacher.gender)}}</p>
                            <p>年龄：{{teacher.age}}</p>
                            <p>课程：{{teacher.course}}</p>
                        </i-col>
                    </Row>
                </Card>
            </i-col>
        </Row>
    </div>
</template>

<script>
    import Axios from "../axios";
    import Common from "../common";
    import HeadTitle from "./component/HeadTitle.vue";

    export default {
        components: {
            HeadTitle
        },
        name: "teacher",
        data() {
            return {
                teachers: [],
                coursesMap: [
                    {key: "8", value: "生态旅游"},
                    {key: "9", value: "太极剑"},
                    {key: "10", value: "太极拳"},
                    {key: "11", value: "交谊舞"},
                    {key: "12", value: "影视"},
                    {key: "13", value: "名族舞"},
                    {key: "14", value: "唱歌"}
                ]
            }
        },
        created() {
            Axios.get("/teachers/all").then((response) => {
                if (response.status === 200) {
                    this.teachers = response.data.map((item) => {
                        return {
                            id: item.id,
                            name: item.name,
                            img: item.headPath + item.head,
                            gender: item.gender,
                            age: item.age,
                            course: this.getCourseText(item.courseIds)
                        }
                    });
                } else {
                    this.$Message.error("获取讲师信息失败。");
                }
            });
        },
        methods: {
            toHome() {
                this.$router.push("/");
            },
            getCourseText(courseIds) {
                let text = "";
                courseIds.forEach((id) => {
                    this.coursesMap.forEach((course) => {
                        if (id === course.key) {
                            text += (text === "" ? "" : ",") + course.value;
                        }
                    })
                });
                return text;
            },
            renderGender(gender) {
                return Common.renderGender(gender);
            }
        }
    }
</script>
